<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport'='width=device-width, initial-scale=1.0'>
    <title>简易计算器</title>
    <script src='./vue.js'></script>
    <style>
        .mybutton button {
            width: 50px;
            height: 50px;
            margin: 5px;
        }
        #app {
            text-align: center;
            margin-top: 50px;
        }
        .result1 {
            font-size: 24px;
            margin: 20px;
            min-height: 30px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div class="mybutton">
            <button v-for="item in [1,2,3,4,5,6,7,8,9,0]" @click="putNum(item)">{{item}}</button>
            <button v-for="item in ['+','-','*','/','=']" @click="tooperator(item)">{{item}}</button>
            <button @click="delany">清除</button>
            <div class="result1">{{display}}</div>
        </div>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                a: 0,
                b: 0,
                sum: 0,
                display: "0",
                operator: "",
                flag: false,
                newCalculation: false
            }
        },
        methods: {
            putNum(e) {
                // 如果刚计算完一个结果，开始新的计算
                if(this.newCalculation) {
                    this.clearAll();
                    this.newCalculation = false;
                }
                
                if (this.flag == false) {
                    // 输入第一个数字
                    this.a = this.a * 10 + e;
                    if (this.operator === "") {
                        this.display = this.a.toString();
                    } else {
                        this.display = this.a.toString() + this.operator + e;
                    }
                } else {
                    // 输入第二个数字
                    this.b = this.b * 10 + e;
                    this.display = this.a.toString() + this.operator + this.b.toString();
                }
            },
            tooperator(e) {
                // 如果点击等号
                if(e === "=") {
                    if(this.operator && this.a !== null && this.b !== null) {
                        this.calculate();
                        this.newCalculation = true;
                    }
                    return;
                }
                
                // 如果已经有一个操作符并且两个数都已输入，则先计算之前的操作
                if(this.operator && this.a !== null && this.b !== null && this.flag) {
                    this.calculate();
                    this.a = this.sum;
                    this.b = 0;
                }
                
                // 设置新的操作符
                this.operator = e;
                this.flag = true;
                this.display = this.a.toString() + e;
            },
            calculate() {
                switch (this.operator) {
                    case "+":
                        this.sum = this.a + this.b;
                        break;
                    case "-":
                        this.sum = this.a - this.b;
                        break;
                    case "*":
                        this.sum = this.a * this.b;
                        break;
                    case "/":
                        if(this.b !== 0) {
                            this.sum = this.a / this.b;
                        } else {
                            this.sum = "错误";
                        }
                        break;
                    default:
                        break;
                }
                this.display = this.a.toString() + this.operator + this.b.toString() + "=" + this.sum.toString();
            },
            delany() {
                this.clearAll();
            },
            clearAll() {
                this.a = 0;
                this.b = 0;
                this.sum = 0;
                this.display = "0";
                this.operator = "";
                this.flag = false;
                this.newCalculation = false;
            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>